<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="product" content="Metro UI CSS Framework">
    <meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev">
    <meta name="description" content="Simple responsive css framework">
    <meta name="keywords" content="Metro, ui, responsive, css, framework, library">

    <link rel="stylesheet" href="css/metro-bootstrap.css">
    <link rel="stylesheet" href="css/docs.css">
    <link href="js/prettify/prettify.css" rel="stylesheet">

    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <script src="js/prettify/prettify.js"></script>

    <script src="js/metro/metro-loader.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/github.info.js"></script>

    <title>Metro UI CSS - Bootstrap CSS library</title>
</head>
<body class="metro">
    <header class="bg-dark" data-load="header.html"></header>

    <div class="page-content clearfix">
        <div class="" style="background-color: #00CCFF">
            <div class="container clearfix" style="height: 300px">
                <div class="carousel bg-lighterBlue" id="car1">
                    <div class="slide">
                        <div class="padding20 nrp nlp text-center">
                            <h1 class="fg-white" style="font-size: 48pt; margin-top: 100px">Metro UI CSS 2.0</h1>
                        </div>
                    </div>

                    <div class="slide">
                        <div class="padding20 nrp nlp">
                            <div class="place-right" style="margin-left: 20px;">
                                <img src="images/Windows-8-Logo.png" class="span3">
                            </div>

                            <h1 class="fg-white">Windows 8 style!</h1>

                            <p class="readable-text padding20 nlp">
                                Metro UI CSS allows to create a Web site in the style of
                                Windows 8 quickly and without distractions on routine tasks.
                                Metro UI CSS is made with LESS. It makes developing systems-based CSS faster, easier, and more fun.
                            </p>
                            <p class="tertiary-text">
                                Metro UI CSS contains set of styles and jQuery plugins and very easy for use.
                            </p>
                        </div>
                    </div>

                    <div class="slide">
                        <div class="padding20 nrp nlp">
                            <div class="place-right" style="margin-left: 50px; margin-top: 10px">
                                <img src="images/css-logo.png" class="span3">
                            </div>

                            <h1 class="fg-white">Developed with advice</h1>

                            <p class="readable-text padding20 nlp">
                                Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons.
                            </p>
                            <p class="tertiary-text">
                                Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.
                            </p>
                        </div>
                    </div>

                    <div class="slide">
                        <div class="padding20 nrp nlp">
                            <div class="place-right" style="margin-left: 50px; margin-top: 30px">
                                <img src="images/bizspark_b_2.png" class="span3">
                            </div>

                            <h1 class="fg-white">BizSpark Startup</h1>
                            <p class="readable-text">
                                Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.
                            </p>
                            <p class="tertiary-text-secondary">
                                BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.
                            </p>
                            <p class="fg-dark"><a class="button small1 warning" href="http://bizspark.com">Join the BizSpark Program now.</a></p>
                        </div>
                    </div>

                    <div class="slide">
                        <div class="padding20 nrp nlp">
                            <div class="place-right" style="margin-left: 20px; margin-top: 20px">
                                <img src="images/phpstorm_7_eap.png" class="span4">
                            </div>

                            <h1 class="fg-white">Thanks to JetBrains</h1>

                            <p class="readable-text padding20 nlp">
                                Thanks to the company JetBrains for supporting the project in the form of a license for a great product PhpStorm.
                            </p>
                            <p>
                                <a class="button small1 primary" href="http://www.jetbrains.com/phpstorm/">Get PhpStorm now!</a>
                            </p>
                        </div>
                    </div>

                    <a class="controls left no-display"><i class="icon-arrow-left-3"></i></a>
                    <a class="controls right no-display"><i class="icon-arrow-right-3"></i></a>
                </div>
                <script>
                    $(function(){
                        $("#car1").carousel({
                            effect: 'fade'
                            ,period: 5000
                            ,duration: 1000
                            ,markers: false
                        });
                    });
                </script>
            </div>
        </div>

        <section class="container">
            <div class="grid">
                <div class="row">
                    <div class="span4 bg-lightBlue padding10">
                        <h2 class="place-right no-margin"><span class="icon-bookmark fg-white"></span></h2>
                        <h2 class="fg-white ntm">Simple</h2>
                        <p class="fg-white tertiary-text">
                            Metro UI CSS - it is very easy to use CSS Framework.
                        </p>
                    </div>
                    <div class="span4 bg-darkGreen padding10">
                        <h2 class="place-right no-margin"><span class="icon-cog fg-white"></span></h2>
                        <h2 class="fg-white ntm">Sufficient</h2>
                        <p class="fg-white tertiary-text">
                            Metro UI CSS contains everything needed to create a website.
                        </p>
                    </div>
                    <div class="span4 bg-orange padding10">
                        <h2 class="place-right no-margin"><span class="icon-tablet fg-white"></span></h2>
                        <h2 class="fg-white ntm">Responsive</h2>
                        <p class="fg-white tertiary-text">
                            Metro UI CSS work on all devices and in all modern browsers.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section style="margin-bottom: 20px">
            <div class="container">

                <div class="grid">
                    <div class="row">
                        <div class="span4">

                            <div class="padding10 bg-white tertiary-text border">
                                <div class="image-container full-size ">
                                    <img src="images/spface.jpg">
                                    <div class="overlay">
                                        Hi! My name Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="span7 bg-white1">
                            <h1 class="ntm">Welcome</h1>
                            <p>
                                Metro UI CSS a set of styles to create a site with an interface similar to Windows 8. This set of styles was developed as a self-contained solution.
                                <br /><br />
                                Metro UI CSS is open source project with MIT licensing model.
                                <br /><hr  class="border-top bd-grayLight"/>
                                <a href="https://github.com/olton/Metro-UI-CSS/archive/master.zip" class="button small danger">Download Metro UI CSS <span class="icon-download-2"></span></a>
                            </p>
                        </div>

                        <div class="span1 text-center border bd-grayLight">
                            <div class="browsers-icons clearfix">
                                <h2 title="Internet Explorer 9+"><i class="icon-IE"></i> </h2>
                                <h2 title="Chrome"><i class="icon-chrome"></i> </h2>
                                <h2 title="Firefox"><i class="icon-firefox"></i> </h2>
                                <h2 title="Opera"><i class="icon-opera"></i> </h2>
                                <h2 title="Safari"><i class="icon-safari"></i> </h2>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="row border-top">
                    <div class="span12 padding20 bg-grayLighter">
                        <h2>Quick start</h2>
                        <p>
                            To use the Metro UI CSS, you have to follow the 5 simple rules:
                        </p>
                        <ol>
                            <li>Create page with HTML5 DOCTYPE</li>
                            <li>Include in head <code>metro-bootstrap.css</code></li>
                            <li>For plugins usage: include in head jquery core, jquery widget factory and metro plugins</li>
                            <li>Create container for Metro UI CSS component with class <code>.metro</code></li>
                            <li>Use markup for components, as described in the pages of this site</li>
                        </ol>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;link rel="stylesheet" href="css/metro-bootstrap.css"&gt;
    &lt;/head&gt;
    &lt;body class="metro"&gt;

    &lt;/body&gt;
&lt;/html&gt;
</pre>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <footer class="">
        <div class="container border-top padding20 nlp nrp">
            <span class="tertiary-text">2012-2013, Metro UI CSS &copy; by &nbsp;</span><a class="tertiary-text" href="mailto:sergey@pimenov.com.ua">Sergey Pimenov</a>
        </div>
    </footer>
</body>
</html>